<template>
  <div class="edit">
    <a-icon class="left" type="left" @click="$router.go(-1)" />
    <top-header :isLeft="true" title="修改信息"></top-header>
    
    <a-form-model ref="ruleForm" :model="userInfo" :rules="rules">
      <div class="content">
        头像：
        <a-upload
          name="avatar"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :before-upload="beforeUpload"
          @change="handleChange"
        >
          <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
        <a-form-model-item label="昵称" prop="name">
          <a-input v-model="userInfo.name" />
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" block shape="round" @click="onSubmit()">提交</a-button>
        </a-form-model-item>
      </div>
    </a-form-model>
  </div>
</template>

<script>
import TopHeader from "../components/TopHeader";

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}

export default {
  components: { TopHeader },
  //取值
  computed: {
    userInfo() {
      return this.$store.getters.userInfo;
    },
  },
  data() {
    return {
      loading: false,
      imageUrl: "",
      rules: {
        user_name: [
          { required: true, message: "请填写昵称", trigger: "blur" },
          { min: 2, message: "请输入正确昵称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl;
          this.loading = false;
        });
      }
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("Image must smaller than 2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          //把数据加到用户个人信息里
          this.$store.dispatch("setUser", this.userInfo);
          //把页面推到Me页面
          this.$router.push({ name: "Me" });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 15px;
  img {
    width: 100px;
    height: 100px;
  }
}

.avatar-uploader > .ant-upload {
  width: 80px;
  height: 80px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}
.ant-upload-select-picture-card {
  // margin-top: 8px;
  color: #666;
}
</style>